<template>
  <div>
    <el-dialog :title="title" :visible.sync="showplan">
      <el-form labelWidth="100px">
        <el-form-item label="培训内容" class="is-required">
          <el-input v-model="planData.tcontent"></el-input>
          <div class="el-form-item__error" v-if="!$v.planData.tcontent.required">请输入培训内容</div>
        </el-form-item>
        <el-form-item label="培训形式" class="is-required">
          <el-select v-model="planData.ttype" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in ttypeArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.planData.ttype.required">请选择培训形式</div>
        </el-form-item>
        <el-form-item label="培训分类" class="is-required">
          <el-select v-model="planData.classify" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in classifyArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.planData.classify.required">请选择培训分类</div>
        </el-form-item>
        <el-form-item label="培训单位" class="is-required">
          <el-input v-model="planData.company"></el-input>
          <div class="el-form-item__error" v-if="!$v.planData.company.required">请输入培训单位</div>
        </el-form-item>
        <el-form-item label="培训时间" class="is-required">
          <el-date-picker
            v-model="plantime"
            type="daterange"
            style="width:100%"
            rangeSeparator="至"
            startPlaceholder="培训开始日期"
            endPlaceholder="培训结束日期"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
          <div class="el-form-item__error" v-if="plantime==null||plantime.length==0">请选择培训日期</div>
        </el-form-item>
        <el-form-item label="人员姓名" class="is-required">
          <el-select v-model="mineStatus" placeholder="请选择" multiple collapseTags>
            <el-option :value="mineStatusValue" style="height: auto">
              <el-tree
                :data="arr"
                showCheckbox
                nodeKey="id"
                ref="tree"
                highlightCurrent
                :props="defaultProps"
                @check-change="handleCheckChange"
              ></el-tree>
            </el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!flag">请选择人员姓名</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showplan = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="newplan" v-if="!isedit">确 定</el-button>
        <el-button size="mini" type="primary" @click="saveeditplan" v-else>保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators';

export default {
  validations: {
    planperson: {
      required,
    },
    planData: {
      tcontent: {
        required,
      },
      ttype: {
        required,
      },
      classify: {
        required,
      },
      company: {
        required,
      },
    },
  },
  props: {
    editdata: Object,
    isedit: Boolean,
  },
  data() {
    return {
      ts: this.newStore(),
      showplan: true,
      flag: false,
      title: '新增培训记录',
      planData: {},
      ttypeArr: [],
      mineStatus: '',
      mineStatusValue: [],
      classifyArr: [],
      planperson: [],
      jbrList: [],
      plantime: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      arr: [],
    };
  },
  created() {
    this.getjbrList();
    this.getTree();
    this.getcodeData('0206', '02', 'ttypeArr');
    this.getcodeData('0207', '02', 'classifyArr');
    if (this.isedit) {
      this.title = '编辑培训记录';
      this.planperson = [];
      this.planData = Object.assign({}, this.editdata.operation1[0].hash);
      this.plantime = [this.planData.pre_begintime, this.planData.pre_endtime];
      for (let i = 0; i < this.editdata.operation2.length; i += 1) {
        this.planperson.push(this.editdata.operation2[i].hash.pid);
      }
    }
  },
  methods: {
    // 公共方法获取代码项
    getcodeData(supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this[arrname] = ts.d.data.operation1;
      });
    },
    // 新增计划
    newplan() {
      if (this.plantime == null) {
        this.plantime = [];
      }
      if (this.plantime.length == 0) {
        this.$message({
          type: 'error',
          message: ' 请仔填写培训时间',
        });
        return;
      }
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else {
        this.$confirm('确认新增?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = this.planData;
            [req.pre_begintime] = [this.plantime[0]];
            [req.pre_endtime] = [this.plantime[1]];
            req.handle = '33224548EFC2E94F8BCA03EC613FED9863207546E0C22785';
            req.pid = this.planperson;

            this.spost(this.ts, '/mainservlet', req).then((ts) => {
              this.$message({
                type: 'success',
                message: '添加成功',
              });
              this.$parent.getplanlist();
              this.showplan = false;
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      }
    },
    // 编辑计划
    saveeditplan() {
      if (this.plantime == null) {
        this.plantime = [];
      }
      if (this.plantime.length == 0) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
        return;
      }
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else {
        this.$confirm('确认保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = this.planData;
            [req.pre_begintime] = [this.plantime[0]];
            [req.pre_endtime] = [this.plantime[1]];
            req.handle =
              '33224548EFC2E94F0E5A626014E7F81B19A09E6608DA9790B0860307829EB17A';
            req.pid = this.planperson;

            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '编辑成功',
              });
              this.$parent.getplanlist();
              this.showplan = false;
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      }
    },
    // 获取经办人列表
    getjbrList() {
      this.jbrList = [];
      const req = {
        handle:
          '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841',
        query: '',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jbrList = ts.d.data.operation1;
        console.log(this.jbrList);
      });
    },
    // 获取Tree是数据
    getTree() {
      const req = {
        handle:
          '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.getTreedata(ts.d.data.operation1);
        }
      });
    },
    // 树形控件
    handleCheckChange(data, checked, indeterminate) {
      const res = this.$refs.tree.getCheckedNodes(true, true); // 这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      const arrLabel = [];
      const arr = [];
      const tt = [];
      res.forEach((item) => {
        arrLabel.push(item.label);
        arr.push(item);
        tt.push(item.id);
      });
      // console.log(arr,'1')
      // console.log(arrLabel,'2')
      this.mineStatusValue = arr;
      this.planperson = tt;
      this.mineStatus = arrLabel;
      console.log(res,arr,tt,arrLabel,'123123')
      if (arr.length > 0) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    getTreedata(data) {
      const arr = data;
      const arr1 = arr.map(item => item.hash);
      const date = [];
      const obj = {
        id: 987654321,
        label: '全部',
        children: [],
      };
      arr1.forEach((item) => {
        if (!date.includes(item.orgname)) {
          date.push(item.orgname);
        }
      });
      const ars = [];
      date.forEach((item, ind) => {
        ars.push({
          id: ind,
          label: item,
          children: [],
        });
      });
      arr1.forEach((item) => {
        ars.forEach((file) => {
          if (file.label === item.orgname) {
            file.children.push({
              id: item.pid,
              label: item.username,
            });
          }
        });
      });
      obj.children = ars;
      this.arr.push(obj);
    },
  },
};
</script>


<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
</style>
